<template>
<div class="mian">
  <div class="conpontent">
    <component :is="selected" :state="state" @changeToast="changeToast"></component>
  </div>
<mt-tabbar :fixed="fixedBottom" v-model="selected">
  <mt-tab-item id="home">
    <img slot="icon" :src="homeImg">
    首页
  </mt-tab-item>
  <mt-tab-item id="equipment" v-if="constrollState != state">
    <img slot="icon" :src="equipmentImg">
    设备
  </mt-tab-item>
  <mt-tab-item id="news"  v-if="constrollState != state">
    <img slot="icon" :src="assetsImg">
    资产
  </mt-tab-item>
   <mt-tab-item id="site"  v-if="constrollState == state">
    <img slot="icon" :src="siteImg">
    站点
  </mt-tab-item>
  <mt-tab-item id="mine">
    <img slot="icon" :src="mineImg">
    我的
  </mt-tab-item>
</mt-tabbar>
</div>
</template>
<script>
import home from './compontent/home.vue'
import equipment from './compontent/equipment.vue'
import news from './compontent/news.vue'
import mine from './compontent/mine.vue'
import site from './compontent/site.vue'
export default {
  data () {
    return {
      fixedBottom: false,
      clickState: 'home',
      // 将监管的人员区分开
      constrollState: 'supervisor',
      toast: null
    }
  },
  created () {
  },
  computed: {
    selected: {
      get () {
        return this.$store.state.choiceState
      },
      set (value) {
        this.toast && this.toast.close()
        this.$store.commit('changeChoiceState', value)
      }
    },
    state () {
      // Proprietor业主,maintainor维保单位,supervisor监管单位
      return this.$store.state.loginState
    },
    homeImg () {
      return this.selected === 'home' ? require('@/assets/image/home-page-active.svg') : require('@/assets/image/home-page.svg')
    },
    equipmentImg () {
      return this.selected === 'equipment' ? require('@/assets/image/equipment-active.svg') : require('@/assets/image/equipment.svg')
    },
    assetsImg () {
      return this.selected === 'news' ? require('@/assets/image/assets-active.svg') : require('@/assets/image/assets.svg')
    },
    mineImg () {
      return this.selected === 'mine' ? require('@/assets/image/mine-active.svg') : require('@/assets/image/mine.svg')
    },
    siteImg () {
      return this.selected === 'site' ? require('@/assets/image/site-active.svg') : require('@/assets/image/site.svg')
    }

  },
  components: {
    home,
    equipment,
    news,
    mine,
    site
  },
  methods: {
    changeToast (val) {
      console.log('子组件触发')
      console.log(val)
      this.toast = val
    }
  }
}
</script>
<style lang="less" scoped>
.mian{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  .conpontent{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 58px;
    overflow: scroll;
  }
}
.tab{
  z-index: 10;
}
.mint-tabbar > .mint-tab-item.is-selected{
  color: #17B887;
}
</style>
